<template>
	<view class="gene">

		<view class="gene-box">
			<view class="gene-li" v-for="(item,index) in dataList" @click="goInfo(item)">
				<view class="li-left">
					<view class="left-top">
						<image src="@/static/imgs/gene/list_1.png" mode="" v-if="index ==0"></image>
						<image src="@/static/imgs/gene/list_2.png" mode="" v-else-if="index ==1"></image>
						<image src="@/static/imgs/gene/list_3.png" mode="" v-else-if="index ==2"></image>
						<image src="@/static/imgs/gene/list_x.png" mode="" v-else></image>
						{{item.title}}
					</view>
					<view class="left-bottom">
						<view class="bottom-box">
							<image src="@/static/imgs/gene/redu.png" mode=""></image>
							<text>{{item.hot}}</text>
						</view>
						<view class="bottom-box">
							<image src="@/static/imgs/gene/xingxing.png" mode=""></image>
							<text>{{item.read}}</text>
						</view>
					</view>
				</view>
				<view class="li-right">
					<image :src="urlConversion(item.cover)" mode=""></image>
				</view>
			</view>
		</view>
		<u-loadmore :status="status[statusindex]" />
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		getCurrentInstance,

	} from "vue";
	import {
		categoryList
	} from "@/api/category/category.js"
	import {
		urlConversion
	} from '@/utils/imgUrl.js'
	import {
		onReachBottom,
		onShow
	} from "@dcloudio/uni-app";

	let cursor = ref(0)
	const statusindex = ref(0)
	const status = ref([
		'loadmore',
		'loading',
		'nomore'
	])
	let dataList = ref([])
	onShow(() => {
		cursor.value = 0
		dataList.value = []
		show()
	})
	onReachBottom(() => {
		if (statusindex.value == 2) return;
		statusindex.value = 1;

		setTimeout(() => {
			show();
		}, 600)
	})

	function show() {
		categoryList({
			section: 3,
			cursor: cursor.value,
			limit: 10
		}).then(res => {
			console.log(res)
			if (res.data.infs.length == 0) {
				statusindex.value = 2
			} else {
				statusindex.value = 1
			}  
			dataList.value = [...dataList.value, ...res.data.infs];
			cursor.value = res.data.cursor

		})
	}

	function goInfo(item) {
		console.log(item.id)
		uni.navigateTo({
			url: '/pages/home/info?id=' + item.id
		})
	}
</script>

<style scoped lang="scss">
	.gene {
		margin: 0;
		padding-top: 786rpx;
		width: 100%;
		min-height: 100vh;
		background: url(@/static/imgs/gene/beijin_gif.gif) no-repeat;
		background-size: contain;
	}

	.gene-box {
		width: 100%;
		background: linear-gradient(180deg, rgba(97, 118, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
		display: flex;
		flex-direction: column;
		align-items: center;

		.gene-li {
			flex-shrink: 0;
			margin-bottom: 32rpx;
			padding: 30rpx 32rpx;
			width: 686rpx;
			height: 242rpx;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;

			.li-right {
				flex-shrink: 0;
				width: 202rpx;
				height: 178rpx;
				overflow: hidden;
				opacity: 1;
				border-radius: 12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.li-left {
				margin-right: 32rpx;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.left-top {

					vertical-align: middle;
					font-size: 16px;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 24px;
					color: rgba(34, 34, 34, 1);
					display: inline-block;
					vertical-align: middle;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;

					image {
						display: inline-block;
						vertical-align: middle;
						flex-shrink: 0;
						margin-right: 12rpx;
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 8rpx;
					}
				}

				.left-bottom {
					display: flex;

					.bottom-box {
						display: flex;
						align-items: center;
						margin-right: 34rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-size: 12px;
							font-weight: 500;
							letter-spacing: 0px;
							line-height: 18px;
							color: rgba(153, 153, 153, 1);
						}
					}
				}
			}
		}
	}
</style>